<script setup>

import { Plus } from '@element-plus/icons-vue'
import ChannelSelect from '@/views/article/components/ChannelSelect.vue'
import { ref } from 'vue'
import { useUserStore } from '@/stores/index.js'
import { ArticlePostService, ArticlePutService } from '@/api/user.js'
import { ElMessage } from 'element-plus'

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const drawerVisible = ref(false)

const emit = defineEmits(['success'])

const addArticle = () => {
  drawerVisible.value = true
  articleForm.value ={
    title: '未命名',
    content: "",
    cover_img: '',
    state: 1,
    user_id: '',
    pub_date: new Date(),
  }
}

const articleForm = ref({
  title: '未命名',
  content: '',
  cover_img: '',
  state: 1,
  cate_id: '',
  user_id: '',
  pub_date: new Date(),
})
const refForm = ref()

const articleRules = {
  title: [
      {required: true, message: "文章标题不能为空", trigger: "blur"},
    ],
  content: [],
  cover_img: [],
  state: [],
  cate_id: [],
  user_id: [],
}

const userStore = useUserStore()

const submitArticle = async () => {
  articleForm.value.user_id = userStore.userInfo.id
  articleForm.value.cover_img = imgUrl.value

  if(articleForm.value.id){
    await ArticlePutService(articleForm.value)
    ElMessage.success("修改成功")
  }
  else{
    articleForm.value.pub_date = new Date()
    await ArticlePostService(articleForm.value)
    ElMessage.success("添加成功")
  }
  drawerVisible.value = false
  emit('success')
}

const editArticle = async (row) => {
  articleForm.value = {...row}
  imgUrl.value = articleForm.value.cover_img
  drawerVisible.value = true
}

const imgUrl = ref('')

const onSelectFile = (uploadFile) => {
  console.log(uploadFile)
  imgUrl.value = URL.createObjectURL(uploadFile.raw)
}

defineExpose({addArticle, editArticle})

</script>

<template>
<el-drawer v-model="drawerVisible" direction="rtl" title="文章" size="50%">
    <el-form
      :model="articleForm"
      label-width="auto"
      :rules="articleRules"
      ref="refForm">
      <el-form-item label="标题" prop="title" >
        <el-input name="title" placeholder="请输入标题" v-model="articleForm.title" />
      </el-form-item>
      <el-form-item prop="state" label="文章状态">
        <el-radio-group v-model="articleForm.state">
          <el-radio :value="0" size="large">已发布</el-radio>
          <el-radio :value="1" size="large">草稿</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="cover_img" label="封面图片">

         <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="onSelectFile"
        >
          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>


      </el-form-item>
      <el-form-item prop="cate_id" label="文章分类">
        <channel-select v-model="articleForm.cate_id"/>
      </el-form-item>
      <el-form-item prop="content" label="文章内容">
        <div class="editor">
          <QuillEditor theme="snow" v-model="articleForm.content" content="html" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitArticle">提交</el-button>
        <el-button @click="drawerVisible=false">取消</el-button>
      </el-form-item>

    </el-form>
  </el-drawer>
</template>

<style scoped>
.avatar-uploader {
  display: inline-block;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

/* 悬停效果 */
.avatar-uploader:hover {
  border-color: #409eff;
}

/* 头像图片样式 */
.avatar {
  width: 178px;
  height: 178px;
  display: block;
  object-fit: cover;
}

/* 上传图标样式 */
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .avatar,
  .avatar-uploader-icon {
    width: 120px;
    height: 120px;
    line-height: 120px;
  }
}

.editor {
  width: 100%;  /* 设置宽度（可调整） */
}

.editor :deep(.ql-editor) {
  min-height: 200px;  /* 设置最小高度 */
}
</style>
